<template>
  <div class="sanstyle" style="position: relative">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">调查工作</span>
            <br />
            <span class="xwz">The investigation</span>
          </div>
        </div>
        <!--标题 E-->

        <!--调查次数B-->
        <div class="tccs">
          <div>
            <div>
              <span style="color: white; font-size: 0.18rem">调查工作次数</span>
            </div>
            <div>
              <span style="color: #2efff2; font-size: 0.36rem">{{
                surveyNum
              }}</span><span style="color: white; font-size: 0.18rem">次</span>
            </div>
            <div><img src="/static/images/cytc.png" alt="" /></div>
          </div>

          <div>
            <div>
              <span style="color: white; font-size: 0.18rem">参与调查人次</span>
            </div>
            <div>
              <span style="color: #34ceff; font-size: 0.36rem">{{
                personNum
              }}</span><span style="color: white; font-size: 0.18rem">次</span>
            </div>
            <div><img src="/static/images/tcry.png" alt="" /></div>
          </div>
        </div>
        <!--调查次数E-->

        <div style="height: 0.3rem"></div>
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">本底资源库</span>
            <br />
            <span class="xwz">Background resource library</span>
          </div>
        </div>
        <!--标题 E-->

        <!--资源列表 B-->
        <div class="zylb">
          <!--搜索 B-->
          <div class="ssk">
            <input type="text" v-model="keyword" />
            <img @click="getSpecies()" style="cursor: pointer" src="/static/images/ss.png" alt="" />
          </div>
          <!--搜索 E-->

          <!--列表B-->
          <div class="zyList">
            <div style="background-color: rgba(46, 255, 242, 0.4)">
              <div v-for="(item, index) in lbList" :key="index">
                <span @click="qhlx(item)" :style="item.sts
                  ? 'border-bottom: .03rem solid #2EFFF2;'
                  : 'border:none'
                  ">{{ item.name }}</span>
              </div>
            </div>
          </div>
          <!--列表E-->

          <!--真正的列表 B-->
          <div class="zzlb">
            <div v-for="(item, index) in listn" :key="index" :style="item.sts ? 'color:#2EFFF2' : 'color: white'"
              @click="lookz(item)">
              <div>
                <span :title="item.zhong">{{ item.zhong }}</span>
              </div>
              <div>
                <span>{{ item.level }}</span>
              </div>
              <div>
                <span @click="looki(item)" class="icon iconfont icon-Vector"></span>
              </div>
            </div>
          </div>
          <!--真正的列表 E-->
        </div>
        <!--资源列表 E-->
      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative">
      <div class="bzxq">
        <div v-for="(item, index) in tclist" :key="index">
          <div><img :src="item.ico" alt="" /></div>
          <div>
            <span :style="{ color: item.color }">{{ item.num }}</span>
            <br />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>

      <!--分布类型 B-->
      <div class="fblx" style="left: 0.34rem; width: 1.4rem">
        <div>
          <img src="/static/images/green.png" alt="" />
          <div style="
              width: 1rem;
              height: 0.4rem;
              line-height: 0.4rem;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            ">
            {{ SpeciesObj.zhong }}
          </div>
        </div>
      </div>
      <div class="fblx" style="width: 2.4rem; left: 2.2rem; cursor: pointer">
        <!--<div><span>金雕</span></div>-->
        <div v-for="(item, index) in fbList" :key="index" @click="qhfb(item)"
          :style="item.sts ? 'opacity: 1;' : 'opacity: .6'">
          <img :src="item.ico" alt="" /><span>{{ item.name }}</span>
        </div>
      </div>
      <!--分布类型 E-->

      <!--tab切换 B-->
      <div class="qhtab" style="top: 1.6rem; left: 0.34rem">
        <div v-for="(item, index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="item.sts ? '/static/images/tab1.png' : '/static/images/tab2.png'
            " alt="" />
          <span style="margin-left: 0.08rem">{{ item.name }}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <!--中间地图 B-->
      <div id="map" style="height: 85%; width: 100%; margin-top: 15%; overflow: hidden"></div>
      <!--中间地图 E-->
    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">物种统计</span>
            <br />
            <span class="xwz">Species statistics</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图 B-->
        <div class="stjqy">
          <div id="pie" style="overflow: hidden"></div>
          <div style="position: relative">
            <div class="ext">
              <div></div>
              <div><span>动物统计</span></div>
            </div>
            <div id="bar1" style="width: 100%; height: 100%"></div>
          </div>
          <div style="position: relative">
            <div class="ext">
              <div style="background-color: #fff27f"></div>
              <div><span>植物统计</span></div>
            </div>
            <div id="bar2" style="width: 100%; height: 100%"></div>
          </div>
        </div>
        <!--统计图 E-->
      </div>
    </div>
    <!--右边 E-->

    <div class="zhezhao" v-if="isShow">
      <div>
        <div class="closei">
          <img style="width: 100%; height: 100%" @click="clearLove" src="/static/images/guanbi.png" alt="" />
        </div>
        <div class="xuanzhuan">
          <img style="width: 100%; height: 100%" @click="xuanzhaun" src="/static/images/xuanzhuan.png" alt="" />
        </div>

        <!--图片 B-->
        <div class="imgBox" id="imgBox">
          <img id="pcr" :src="lovePhoto" alt="" />
        </div>
        <!--图片 E-->

        <!--轮播图 B-->
        <div class="lbxtimg">
          <!--左边B-->
          <div class="jianmotua">
            <img @click="lmv" src="/static/images/leftjiantou.png" alt="" />
          </div>
          <!--左边E-->

          <!--l轮播图容器 B-->
          <div class="lbtbox">
            <ul class="clearfix" id="imgul" :style="{ width: 2.3 * imglist.length + 'rem' }">
              <li v-for="(item, index) in imglist" :key="index" :style="item.fill ? 'border: 2px solid #2EFFF2;' : 'border:none'
                " @click="xbdimg(item)">
                <img :src="iscloud(item.url)" alt="" />
              </li>
            </ul>
          </div>
          <!--l轮播图容器 E-->

          <!--右边B-->
          <div class="jianmotua" @click="rmv">
            <img src="/static/images/rightjainotu.png" alt="" />
          </div>
          <!--右边E-->
        </div>
        <!--轮播图 E-->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";

export default {
  name: "bdzy",
  data() {
    return {
      keyword: "",
      navList: [
        {
          name: "网格",
          type: "wg",
          sts: false,
        },
        {
          name: "功能区划",
          type: "gnqh",
          sts: true,
        }
      ],
      fbList: [
        {
          name: "诱捕点分布",
          ico: "/static/images/red.png",
          sts: false,
        },
        {
          name: "样方分布",
          ico: "/static/images/yellow.png",
          sts: false,
        },
      ],
      tclist: [
        {
          ico: "/static/images/tc1.png",
          name: "调查样方(个)",
          num: 642,
          color: "#2EFFF2",
        },
        {
          ico: "/static/images/tc2.png",
          name: "调查样点(个)",
          num: 385,
          color: "#FFF27F",
        },
        {
          ico: "/static/images/tc3.png",
          name: "已走样线(km)",
          num: 836,
          color: "#917FFF",
        },
        {
          ico: "/static/images/tc4.png",
          name: "采集数据(条)",
          num: 170,
          color: "#34CEFF",
        },
      ],
      lbList: [
        {
          name: "动物",
          type: "animal",
          sts: true,
        },
        {
          name: "植物",
          type: "plant",
          sts: false,
        },
        {
          name: "真菌",
          type: "fungus",
          sts: false,
        },
      ],
      listn: [],
      SpeciesType: "animal",
      areaId: "",
      SpeciesObj: {
        zhong: "",
      },
      personNum: 0,
      surveyNum: 0,
      yfPoint: [],
      ydPoint: [],
      fbPoint: [],
      yd: [],
      yf: [],
      maptype: "wg",
      imglist: [],
      idx: 0,
      xz: 0,
      isShow: false,
      lovePhoto: "",
      bhqName: [],
      MapColor: [
        "rgba(203, 255, 252, 0.8)",
        "rgba(74, 239, 230, 0.8)",
        "rgba(4, 178, 169, 0.8)",
        "rgba(203, 255, 252, 0.8)",
        "rgba(114,8,82,.8)",
        "rgba(174,213,13,.8)",
        "rgba(194,133,112,.8)",
        "rgba(225,66,19,.8)",
        "rgba(94,60,190,.8)",
        "rgba(253,166,199,.8)",
      ],
      syd: [
        // { value: [116.0037, 40.3405] },
        // { value: [116.0016, 40.3397] },
        // { value: [115.9961, 40.3349] },
        // { value: [115.9993, 40.3337] },
      ]
    };
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.getdata();
    this.getbaseViewCount();
  },
  mounted() {
    this.getspeciesCount();
    let vm = this;
    (async function f() {
      let res = await http.get("/papi/" + vm.areaId + "_json/gnqh.json");
      let arr = [];
      res.data.features.forEach((t) => {
        arr.push(t.properties.name);
      });
      vm.bhqName = arr;
      vm.getpointFenbu();

    })();
    const _that = this;
    window.onresize = () => {
      return (() => {
        let maxWidth = $("#imgBox").width();
        let maxHeight = $("#imgBox").height();
        let path = $("#pcr").attr("src");
        _that.AutoSize(path, maxWidth, maxHeight);
      })();
    };
  },
  methods: {
    clearLove() {
      this.idx = 0;
      this.xz = 0;
      this.isShow = false;
    },
    xuanzhaun() {
      this.xz++;
      $("#pcr").css({ transform: "rotate(" + this.xz * 90 + "deg)" });
    },
    xbdimg(data) {
      this.imglist.forEach((e) => {
        if (e.url == data.url) {
          e.fill = true;
        } else {
          e.fill = false;
        }
      });
      this.lovePhoto = data.url;
      this.xz = 0;
      $("#pcr").css({ transform: "rotate(0deg)" });
      let vm = this;
      setTimeout(function () {
        let maxWidth = $("#imgBox").width();
        let maxHeight = $("#imgBox").height();
        let path = $("#pcr").attr("src");
        vm.AutoSize(path, maxWidth, maxHeight);
      }, 500);
    },
    lmv() {
      let target = $("#imgul"),
        vm = this;
      if (this.idx < this.imglist.length - 4) {
        vm.idx++;
        target.stop().animate({ left: -vm.idx * 2.3 + 0.4 + "rem" }, 500);
      }
    },
    rmv() {
      let target = $("#imgul"),
        vm = this;
      if (this.idx > 0) {
        vm.idx--;
        target.stop().animate({ left: -vm.idx * 2.3 + "rem" }, 500);
      }
    },
    AutoSize(Img, maxWidth, maxHeight) {
      let image = new Image();
      image.src = Img;
      image.onload = function () {
        if (image.width < maxWidth && image.height < maxHeight) {
          $("#pcr").css({ width: image.width, height: image.height });
        } else {
          if (maxWidth / maxHeight <= image.width / image.height) {
            $("#pcr").animate(
              {
                width: maxWidth,
                height: maxWidth * (image.height / image.width),
              },
              "fast"
            );
          } else {
            $("#pcr").animate(
              {
                width: maxHeight * (image.width / image.height),
                height: maxHeight,
              },
              "fast"
            );
          }
        }
      };
    },
    looki(data) {
      let vm = this;
      (async function f() {
        let res = await http.get(api.findOne + data.id);
        let item = res.data;
        if (item.photos.length < 0) {
          vm.$message({
            message: "该物种暂无图像资料,请尽快补充",
            type: "warning",
          });
        } else {
          let arr = [];
          item.photos.forEach((e, index) => {
            if (vm.isMp4(e.address) == "照片" && index < 10) {
              let z = {
                fill: false,
                url: e.address,
              };
              arr.push(z);
            }
          });
          if (arr.length > 0) {
            arr[0].fill = true;
            vm.lovePhoto = arr[0].url;
            vm.imglist = arr;
            setTimeout(function () {
              vm.isShow = true;
              setTimeout(function () {
                let maxWidth = $("#imgBox").width();
                let maxHeight = $("#imgBox").height();
                let path = $("#pcr").attr("src");
                vm.AutoSize(path, maxWidth, maxHeight);
              }, 500);
            }, 500);
          } else {
            vm.$message({
              message: "该物种暂无图像资料,请尽快补充",
              type: "warning",
            });
          }
        }
      })();
    },
    isMp4(m) {
      let iv = m.split(".");
      if (iv[iv.length - 1].toLowerCase() == "mp4") {
        return "视频";
      } else {
        return "照片";
      }
    },
    iscloud(p) {
      if (p.split(":")[0] == "http") {
        return p + "@oosImage|150h";
      }
      if (p.split(":")[0] == "https") {
        return p + "?x-amz-process=image/resize,h_150,m_lfit";
      }
    },
    getpointFenbu() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.pointFenbu + vm.areaId);
        let yf = [];
        res.data.yangfangFenbu.forEach((t, index) => {
          if (index < 100) {
            let z = {
              value: [t.lon, t.lat],
            };
            yf.push(z);
          }
        });
        vm.yfPoint = yf;
        let yd = [];
        res.data.yangdianFenbu.forEach((t, index) => {
          if (index < 100) {
            let z = {
              value: [t.lon, t.lat],
            };
            yd.push(z);
          }
        });
        vm.ydPoint = yd;
        vm.getSpecies();
      })();
    },
    getspeciesCount() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.speciesCount + vm.areaId);
        let wuzhong = res.data.wuzhongCount;
        let pie = [
          { value: wuzhong.animal, name: "动物" },
          { value: wuzhong.fungus, name: "真菌" },
          { value: wuzhong.plant, name: "植物" },
        ];
        vm.drawpie(pie);
        let a = res.data.animalFenlei;
        let bar1 = [a.gang, a.mu, a.ke, a.shu, a.zhong];
        vm.drawbar1(bar1);
        let p = res.data.plantFenlei;
        let bar2 = [p.gang, p.mu, p.ke, p.shu, p.zhong];
        vm.drawbar2(bar2);
      })();
    },
    getbaseViewCount() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.baseViewCount + vm.areaId);
        vm.personNum = res.data.personNum;
        vm.surveyNum = res.data.surveyNum;
      })();
    },
    lookz(data) {
      this.listn.forEach((t) => {
        t.sts = false;
      });
      data.sts = true;
      this.SpeciesObj = data;
      let Point = data,
        fenbu = [];
      if (Point.distribution != "") {
        let arr = Point.distribution.split("#");
        arr.forEach((t) => {
          let i = t.split("-");
          if (i.length > 1) {
            let z = { value: [i[0], i[1]] };
            fenbu.push(z);
          }
        });
      }
      this.fbPoint = fenbu;
      this.datamap(this.maptype);
    },
    getSpecies() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.Species, {
          areaId: _that.areaId,
          type: _that.SpeciesType,
          keyword: _that.keyword,
        });
        if (res.data.length > 0) {
          res.data.forEach((t, index) => {
            if (index == 0) {
              t["sts"] = true;
            } else {
              t["sts"] = false;
            }
          });
          _that.SpeciesObj = res.data[0];
          let Point = res.data[0],
            fenbu = [];
          if (Point.distribution != "") {
            let arr = Point.distribution.split("#");
            arr.forEach((t, index) => {
              if (index < 100) {
                let i = t.split("-");
                if (i.length > 1) {
                  let z = { value: [i[0], i[1]] };
                  fenbu.push(z);
                }
              }
            });
          }
          _that.fbPoint = fenbu;
          _that.datamap("wg");
        }
        _that.listn = res.data;
      })();
    },
    getdata() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.ViewCount + "?areaId=" + _that.areaId);
        _that.tclist[0].num = res.data.yangfang;
        _that.tclist[1].num = res.data.yangdian;
        _that.tclist[2].num = res.data.yangxianDistance;
        _that.tclist[3].num = res.data.dataNum;
      })();
    },
    drawpie(data) {
      let myChart = echarts.getInstanceByDom(document.getElementById("pie"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("pie"));
      }
      let option = {
        color: ["#7FFFFF", "#FFF27F", "#917FFF"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            fontSize: 14, //字体大小
            color: "#fff",
          },
          // data: ['动物', '植物', '真菌']
        },
        series: [
          {
            name: "统计",
            type: "pie",
            center: ["50%", "60%"],
            radius: ["40%", "66%"],
            avoidLabelOverlap: false,
            labelLine: {
              show: true,
            },
            label: {
              color: "#fff",
              fontSize: 14,
              formatter: function (parmas) {
                if (parmas.name == "动物") {
                  return parmas.name + "  " + "{dw|" + parmas.value + "}";
                }
                if (parmas.name == "植物") {
                  return parmas.name + "  " + "{zw|" + parmas.value + "}";
                }
                if (parmas.name == "真菌") {
                  return parmas.name + "  " + "{zj|" + parmas.value + "}";
                }
              },
              rich: {
                dw: {
                  color: "#7FFFFF",
                  fontSize: 14,
                },
                zw: {
                  color: "#FFF27F",
                  fontSize: 14,
                },
                zj: {
                  color: "#917FFF",
                  fontSize: 14,
                },
              },
            },
            data: data,
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawbar1(data) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar1"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar1"));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: ["纲", "目", "科", "属", "种"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "20%",
          left: "10%",
          right: "1%",
          bottom: "10%",
        },
        series: [
          {
            data: data,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(46, 255, 242, .1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(46, 255, 242, 1)",
                  },
                ]),
              },
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawbar2(data) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar2"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar2"));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: ["纲", "目", "科", "属", "种"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "20%",
          left: "10%",
          right: "1%",
          bottom: "10%",
        },
        series: [
          {
            data: data,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(46, 255, 242, .1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(46, 255, 242, 1)",
                  },
                ]),
              },
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    yqColor(n) {
      if (n == "三堡分场") {
        return "rgba(127 ,201, 127,0.4)";
      }
      if (n == "北分场") {
        return "rgba(190,174, 212,0.4)";
      }
      if (n == "石峡分场") {
        return "rgba(253, 192, 134,0.4))";
      }
      if (n == "西拨子分场") {
        return "rgba(255, 255 ,153,0.4)";
      }
      if (n == "青龙桥分场") {
        return "rgba(56, 108 ,176,0.4)";
      }
    },
    datamap(flag) {
      this.maptype = flag;
      this.navList.forEach((e) => {
        if (flag == e.type) {
          e.sts = true;
        } else {
          e.sts = false;
        }
      });
      if (flag == "gnqh") {
        let url = "/papi/" + this.areaId + "_json/gnqh.json";
        let jsondata = [];
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            //延庆版本
            itemStyle: {
              show: true,
              areaColor: this.yqColor(c),
              borderColor: this.yqColor(c),
              borderWidth: "1",
            },
          });
        });
        let geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        this.map(url, geo, this.fbPoint, this.yd, this.yf, this.syd);
      }
      if (flag == "wg") {
        let geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        let url = "/papi/" + this.areaId + "_json/wangge.json";
        this.map(url, geo, this.fbPoint, this.yd, this.yf, this.syd);
      }
    },
    map(url, geo, fenbu, yd, yf, syd) {
      let vm = this;
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(document.getElementById("map"));
      } else {
        myChart.clear();
      }
      $.getJSON(url, function (geoJson) {
        echarts.registerMap("GeoJson", geoJson);
        myChart.showLoading("default", {
          text: "加载中，请稍候...",
          maskColor: "rgba(0,0,0,.3)",
          textColor: "#fff",
        });
        let option = {
          geo: geo,
          series: [
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "image:///static/images/red.png",
              legendHoverLink: true,
              symbolSize: [16, 18],
              data: yd,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "image:///static/images/yellow.png",
              symbolSize: [16, 18],
              data: yf,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "image:///static/images/green.png",
              symbolSize: [16, 18],
              data: fenbu,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            },
            {
              name: "水源点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "circle",
              symbolSize: [10, 10],
              data: syd,
              itemStyle: {
                normal: {
                  color: "#00FF00", //标志颜色
                }
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            }
          ],
        };
        myChart.setOption(option, true);
        setTimeout(function () {
          myChart.hideLoading();
          myChart.resize();
        }, 500);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    filteryType(e) {
      if (e == "延庆区") {
        return "rgba(203, 255, 252, 0.8)";
      }
      if (e == "缓冲区") {
        return "rgba(74, 239, 230, 0.8)";
      }
      if (e == "核心区") {
        return "rgba(4, 178, 169, 0.8)";
      }
      return "rgba(203, 255, 252, 0.8)";
    },
    qhfb(item) {
      item.sts = !item.sts;
      let url = "",
        geo = {},
        jsondata = [];
      if (this.maptype == "gnqh") {
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            itemStyle: {
              show: true,
              areaColor: this.MapColor[x],
              borderColor: this.MapColor[x],
              borderWidth: "1",
            },
          });
        });
        geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        url = "/papi/" + this.areaId + "_json/gnqh.json";
      }
      if (this.maptype == "wg") {
        geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        url = "/papi/" + this.areaId + "_json/wangge.json";
      }
      if (item.sts) {
        if (item.name == "诱捕点分布") {
          this.yd = this.ydPoint;
        }
        if (item.name == "样方分布") {
          this.yf = this.yfPoint;
        }
      } else {
        if (item.name == "诱捕点分布") {
          this.yd = [];
        }
        if (item.name == "样方分布") {
          this.yf = [];
        }
      }

      this.map(url, geo, this.fbPoint, this.yd, this.yf, this.syd);
    },
    qhlx(item) {
      this.lbList.forEach((e) => {
        e.sts = false;
      });
      item.sts = true;
      this.SpeciesType = item.type;
      this.getSpecies();
    },
  },
};
</script>

<style scoped>
@import "../../static/css/jbxx.css";
</style>
